<template>
  <div class="box">
    <div class="header">西安</div>
    <div class="main">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
      <van-grid :column-num="5" :border="false" :icon-size="40">
        <van-grid-item
          v-for="item in navList"
          :key="item.navid"
          :icon="item.imgurl"
          :text="item.title"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import myAxios from '../utils/request'
import Vue from "vue";
import { Swipe, SwipeItem,Grid, GridItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
export default {
  name: "Home",
  components: {},
  data() {
    return {
      navList: [
        {
          navid: 1,
          title: "嗨购超市",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png",
        },
        {
          navid: 2,
          title: "数码电器",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
        },
        {
          navid: 3,
          title: "嗨购服饰",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg",
        },
        {
          navid: 4,
          title: "嗨购生鲜",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg",
        },
        {
          navid: 5,
          title: "嗨购到家",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg",
        },
        {
          navid: 6,
          title: "充值缴费",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg",
        },
        {
          navid: 7,
          title: "9.9元拼",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg",
        },
        {
          navid: 8,
          title: "领券",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg",
        },
        {
          navid: 9,
          title: "领金贴",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg",
        },
        {
          navid: 10,
          title: "plus会员",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg",
        },
      ],
    };
  },
  created () {
    myAxios.get('/banner/list').then(data=>{
      console.log(data);
    })
  }
};
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
